<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

	<!--extjs-->
	<!--css-->
	<link rel="stylesheet" type="text/css" href="common.css" />
	<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
	<link rel="stylesheet" type="text/css" href="style.css" >
    <link rel="stylesheet" type="text/css" href="grid-examples.css" />
	<!-- LIBS -->
	<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="../extjs/ext-all.js"></script>
	<script type="text/javascript" src="../extjs/ext-lang-zh_CN.js"></script>
	<!-- ENDLIBS -->
</head>
<body topmargin="0" leftmargin="0">
    <div id='loading' class="loading">
    	<img src="images/extanim32.gif" width="32" height="32" style="margin-right:8px;" align="absmiddle"/>Loading...
    </div>
    <div id="aptShow" style='height:0px;display:none'>
    	<%int i = 0;
    	for(i=0;i<10;i++){ %>
			<!-- 循环显示宿舍情况div -->
					<div class="apartment" >
						<a onclick="javascript:showRooms(<%=i+1 %>);return false;" href="#">
								<img
								src="b1.jpg" 
								style="border:1px  solid white"
								onmouseover="this.style.border='1px groove black'"
								onmouseout="this.style.border='1px  solid white'" 
								width="120px" height="120px" 
								/>
						 </a>
						<div >
						    <%=i+1 %>号楼
							<br />
							总入住人数为：1231
							<br />
							可入住人数为：135
						</div>
					</div>
			<!-- 循环显示宿舍情况div结束 -->
		<%} %>
	</div>
</body>
</html>
<!--////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<script  type="text/javascript" >
	Ext.onReady(function() {	
	    var centerPanel = new Ext.TabPanel({
	    	id:'tabs',
			frame : false,
			region : 'center',
        	activeTab: 0,
        	items:[
				{ 
	              title: '楼宇管理',
	              autoScroll : true,	              
	              html: document.getElementById('aptShow').innerHTML
	            }
        	]
    	});
		//布局
		var viewport = new Ext.Viewport({
			layout : 'border',
			items : [centerPanel]
		});
    
		Ext.get('loading').remove();
	});	
	function showRooms(id){
        	Ext.getCmp('tabs').add({ 
	        	title: id+'号楼',
            	closable:true,
            	html:"<iframe id='iframe_center' name='iframe_center' src='listroom.jsp' "
									+ "width='100%' height='100%' frameborder=0 border=0/>"
            	//layout: 'accordion',
				//width:'100%',
				//height:'100%',
				//items: [
				//    Ext.getCmp('domInfoPanel'),
				//    {id:'roomInfo',title: '宿舍基本信息', collapsible: true,
				//    
				//	}
				//]
	        }).show();	        
    }
    

</script>